<template>
	<view class="main-content">
		<view class="model-title">
			奖金结算规则(会员)
		</view>
		<view class="model-section bg-white">
			
			<view class="row header">
				<view style="width: 25vw"> 贷款 </view>
				<view style="width: 17.5vw;"> 年会员以下 </view>
				<view style="width: 17.5vw;"> 年会员以上 </view>
				<view style="width: 27vw;"> 结算条件 </view>
				<view style="width: 13vw;"> 结算周期 </view>
			</view>
			<view>
				<view v-for="(v,k) in lists" :key="k" class="row list-content  black">
					<view class="lists-item u-text-center " style="width: 25vw">{{v.name||''}}</view>
					<view class="lists-item u-text-center" style="width: 17.5vw;">{{v.user_return_point||''}}</view>
					<view class="lists-item u-text-center" style="width: 17.5vw;">{{v.vip_return_point||''}}</view>
					<view class="lists-item u-text-center" style="width: 27vw;">{{v.term_of_settlement||''}}</view>
					<view class="lists-item u-text-center" style="width: 13vw;">{{v.settlement_cycle||''}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getRule
	} from '@/api/app'
	export default {
		data() {
			return {
				lists: []
			};
		},
		onLoad() {
			var _this = this;
			getRule().then(res => {
				if (res.code == 1) _this.lists = res.data
			})
			
			uni.$once('h5ShareSetFinished',function(w,o){
				o.shareTitle = '佣金政策';
				o.shareDesc = '佣金政策';
				w.share(o)
			})
		}
	}
</script>

<style lang="scss">
	page {
		color: #fff;
		// background: #f6f6F6;
		background-size: 100% 400px;
		background: rgba(102, 166, 255, .5);
		background-repeat: no-repeat;

		.main-content {
			padding: 1.2rem 0;
			min-height: 100vh;
			background: transparent;

			.model-title {
				font-size: 1.26rem;
				font-weight: bold;
				text-align: center;
				margin-bottom: 1.2rem;

				&::before,
				&::after {
					content: "";
					display: inline-block;
					width: 1.4rem;
					height: 1.02rem;
					vertical-align: baseline;
					margin: 0 0.8rem;
					background: url() 50% no-repeat;
					-webkit-background-size: contain;
					background-size: contain;
				}

				&::after {
					background-image: url();
				}
			}

			.model-section {
				margin: 20rpx;
				overflow: hidden;
				border: 2rpx solid #fff;
				border-radius: 10rpx;

				.model-section-table {
					font-size: 22rpx;
					text-align: center;
					color: #333;
					background: #fff;
					border-collapse: collapse;
					border: none;
					border-color: #66a6ff;

					
				}
			}
		}
	}
	
	.header {
		height: 66rpx;
		line-height: 66rpx;
		font-weight: 700;
		color: #66a6ff;
		font-size: 21rpx;
		text-align: center;
		background: rgba(102, 166, 255, .1);
	}
	
	.list-content {
		font-size: 21rpx;
		text-align: center;
		
		&:last-child {
			.lists-item {
				border-bottom: 1px solid #FFF;
			}
		}
		
		.lists-item {
			height: 66rpx;
			line-height: 66rpx;
			border-right: 1px solid #eee;
			border-bottom: 1px solid #eee;
			
			&:last-child {
				border-right: 1px solid #FFF;
			}
		}
	}
</style>